import React, { useEffect, useState } from "react";
import { Table, Button, Modal, Tooltip, notification} from "antd";
import axios from "axios";
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
  VerticalAlignTopOutlined
} from "@ant-design/icons";
const { confirm } = Modal;

export default function NewsDraft(props) {
  const [dataSource, setdataSource] = useState([]);
  const { username } = JSON.parse(localStorage.getItem("token"));
  useEffect(() => {
    axios
      .get(`/news?_expand=category&author=${username}&auditState=0`)
      .then(({ data }) => {
        setdataSource(data);
      });
  }, [username]);
  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      render: id => <b>{id}</b>
    },
    {
      title: "新闻标题",
      dataIndex: "title",
      render(title, item) {
        return <a href={`/#/news-manage/preview/${item.id}`}>{title}</a>;
      }
    },
    {
      title: "作者",
      dataIndex: "author"
    },
    {
      title: "新闻分类",
      dataIndex: "category",
      render(category) {
        return category.title;
      }
    },
    {
      title: "操作",
      render(item) {
        return (
          <div>
            <Tooltip title="删除">
              <Button
                danger
                icon={<DeleteOutlined />}
                shape="circle"
                size="large"
                style={{ marginRight: "10px" }}
                onClick={() => showDelConfirm(item)}
              />
            </Tooltip>
            <Tooltip title="修改">
              <Button
                type="primary"
                icon={<EditOutlined />}
                shape="circle"
                size="large"
                style={{ marginRight: "10px" }}
                onClick={() => {
                  props.history.push(`/news-manage/update/${item.id}`);
                }}
              />
            </Tooltip>
            <Tooltip title="提交审核">
              <Button
                type="primary"
                icon={<VerticalAlignTopOutlined />}
                shape="circle"
                size="large"
                onClick={() => {
                  submitAudit(item.id);
                }}
              />
            </Tooltip>
          </div>
        );
      }
    }
  ];
  function showDelConfirm(item) {
    confirm({
      title: "您确定删除该条新闻吗?",
      icon: <ExclamationCircleOutlined />,
      onOk() {
        setdataSource(dataSource.filter(v => v.id !== item.id));
        axios.delete(`/news/${item.id}`);
      },
      onCancel() {}
    });
  }
  const submitAudit = id => {
    axios
      .patch(`/news/${id}`, {
        auditState: 1
      })
      .then(() => {
        // setdataSource(dataSource.filter(v => v.id !== id));
        // message.success("提交审核成功~");
        props.history.push("/audit-manage/list");
        notification.info({
          message: "通知",
          description: `您的新闻已提交到[审核列表]中`,
          placement: "bottomRight"
        });
      });
  };
  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      pagination={{ pageSize: 5 }}
      rowKey={item => item.id}
    />
  );
}
